<template>
    <div class="home-panel" ref="target">
        <HomePanel title="热门品牌" sub-title="国际经典 品质保证">
            <template #right>
                <a @click="toggle(-1)" href="javascript:;" class="iconfont icon-angle-left prev"
                   :class="{disabled:index===0}"></a>
                <a @click="toggle(1)" href="javascript:;" class="iconfont icon-angle-right next"
                   :class="{disabled:index===1}"></a>
            </template>
            <!-- 面板内容 -->
            <div class="box">
                <Transition name="fade">
                    <ul class="list" v-if="brands.length" :style="{transform:`translateX(${-index*1240}px)`}">
                        <li v-for="item in brands" :key="item.id">
                            <RouterLink :to="`/product/${item.id}`">
                                <img :src="item.picture" alt="">
                            </RouterLink>
                        </li>
                    </ul>
                    <div v-else class="skeleton">
                        <el-skeleton v-for="i in 5" :key="i" animated style="height: 305px;">
                            <template slot="template">
                                <el-skeleton-item variant="image"
                                                  style="width: 240px; height: 305px;margin-right: 10px;"/>
                            </template>
                        </el-skeleton>
                    </div>
                </Transition>
            </div>
        </HomePanel>
    </div>
</template>

<script>
    import HomePanel from "@/views/home/components/home-panel";
    import XtxMore from "@/components/library/xtx-more";
    import {findBrand} from "@/api/home";
    import HomeSkeleton from "@/views/home/components/home-skeleton";
    import {useLazyData} from "@/hooks";

    export default {
        name: "HomeBrand",
        components: {HomeSkeleton, XtxMore, HomePanel},
        data() {
            return {
                brands: [],
                index: 0
            }
        },
        mounted() {
            useLazyData(() => findBrand(10), this.$refs.target, (data) => {
                this.brands = data
            })
        },
        methods: {
            toggle(step) {
                const newIndex = this.index + step
                if (newIndex < 0 || newIndex > 1) return
                this.index = newIndex
            }
        }

    }
</script>

<style scoped lang="less">

    .home-panel {
        background: #f5f5f5;

        .iconfont {
            width: 20px;
            height: 20px;
            color: #fff;
            display: inline-block;
            text-align: center;
            margin-left: 5px;
            background: @xtxColor;

            &::before {
                font-size: 12px;
                position: relative;
                top: -2px;
            }

            &.disabled {
                background: #ccc;
                cursor: not-allowed;
            }
        }

        .box {
            display: flex;
            width: 100%;
            height: 345px;
            overflow: hidden;
            padding-bottom: 40px;

            .list {
                width: 200%;
                display: flex;
                transition: all 1s;

                li {
                    margin-right: 10px;
                    width: 240px;

                    &:nth-child(5n) {
                        margin-right: 0;
                    }

                    img {
                        width: 240px;
                        height: 305px;
                    }
                }
            }

            .skeleton {
                width: 100%;
                display: flex;

                .el-skeleton {
                    margin-right: 10px;

                    &:nth-child(5n) {
                        margin-right: 0;
                    }
                }
            }
        }

    }

</style>